<template>
<template>
  <q-page class="college-finder-page">
    <div class="banner-section">
      <div class="banner-content">
        <div class="tech-grid"></div>
        <h1 class="banner-title">大学择校系统</h1>
        <p class="banner-subtitle">用科技找到最适合您的大学</p>
      </div>
    </div>

    <div class="content-container q-pa-md">
      <div class="search-section q-mb-xl">
        <q-card class="search-card">
          <q-card-section>
            <div class="text-h6">查找大学</div>
            <div class="search-form q-mt-md">
              <q-input
                v-model="searchQuery"
                filled
                label="输入大学名称或专业"
                class="q-mb-md"
                rounded
              >
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
              
              <div class="filter-row q-mb-md">
                <q-select
                  v-model="selectedRegion"
                  :options="regions"
                  label="地区"
                  filled
                  class="q-mr-md"
                  rounded
                />
                
                <q-select
                  v-model="selectedType"
                  :options="types"
                  label="类型"
                  filled
                  rounded
                />
              </div>
              
              <q-btn 
                color="primary" 
                label="搜索" 
                @click="searchColleges"
                class="full-width"
                rounded
                unelevated
              />
            </div>
          </q-card-section>
        </q-card>
      </div>

      <div class="featured-section q-mb-xl">
        <div class="text-h6 q-mb-md">推荐大学</div>
        <div class="row q-col-gutter-md">
          <div 
            class="col-xs-12 col-sm-6 col-md-4" 
            v-for="college in featuredColleges" 
            :key="college.id"
          >
            <q-card class="college-card" bordered>
              <q-img
                :src="college.image"
                basic
                style="height: 150px"
              />
              
              <q-card-section>
                <div class="text-h6">{{ college.name }}</div>
                <div class="text-caption text-grey">{{ college.location }}</div>
                <div class="q-mt-sm">{{ college.description }}</div>
              </q-card-section>
              
              <q-card-actions align="right">
                <q-btn 
                  color="primary"
                  label="详情"
                  :to="`/university/${college.id}`"
                  rounded
                  unelevated
                />
              </q-card-actions>
            </q-card>
          </div>
        </div>
      </div>

      <div class="stats-section q-mb-xl">
        <div class="row q-col-gutter-md text-center">
          <div class="col-12 col-md-4">
            <q-card class="stat-card">
              <q-card-section>
                <div class="text-h4 text-primary">{{ stats.colleges }}</div>
                <div class="text-subtitle1">合作大学</div>
              </q-card-section>
            </q-card>
          </div>
          
          <div class="col-12 col-md-4">
            <q-card class="stat-card">
              <q-card-section>
                <div class="text-h4 text-primary">{{ stats.majors }}</div>
                <div class="text-subtitle1">专业类别</div>
              </q-card-section>
            </q-card>
          </div>
          
          <div class="col-12 col-md-4">
            <q-card class="stat-card">
              <q-card-section>
                <div class="text-h4 text-primary">{{ stats.students }}</div>
                <div class="text-subtitle1">在读学生</div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'

// 搜索相关数据
const searchQuery = ref('')
const selectedRegion = ref(null)
const selectedType = ref(null)

// 地区选项
const regions = [
  '北京', '上海', '天津', '重庆', '广东', '江苏', '浙江', '山东', '河南', '湖北'
]

// 大学类型
const types = [
  '综合类', '理工类', '师范类', '医药类', '农林类', '财经类', '政法类', '体育类', '艺术类'
]

// 推荐大学列表
const featuredColleges = ref([
  {
    id: 1,
    name: '清华大学',
    location: '北京市',
    description: '中国顶尖综合性大学，以工科和理科著称',
    image: 'https://www.tsinghua.edu.cn/__local/3/19/4A/7102C453874F665740603C87595_74752F51_23116.jpg'
  },
  {
    id: 2,
    name: '北京大学',
    location: '北京市',
    description: '中国顶尖综合性大学，文理并重',
    image: 'https://upload.wikimedia.org/wikipedia/commons/3/32/Beijing_UNIVERSITY_GATE.jpg'
  },
  {
    id: 3,
    name: '复旦大学',
    location: '上海市',
    description: '中国著名综合性研究型大学',
    image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Fudan_University_School_of_Management.jpg'
  }
])

// 统计数据
const stats = ref({
  colleges: 128,
  majors: 864,
  students: '10万+'
})

// 搜索函数
function searchColleges() {
  // 实际项目中这里会执行搜索逻辑
  console.log('搜索:', {
    query: searchQuery.value,
    region: selectedRegion.value,
    type: selectedType.value
  })
}
</script>

<style lang="scss" scoped>
.college-finder-page {
  .banner-section {
    position: relative;
    background: linear-gradient(135deg, #00695C 0%, #0097A7 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    overflow: hidden;
    
    .tech-grid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(41, 182, 246, 0.1) 0%, transparent 15%),
        radial-gradient(circle at 90% 80%, rgba(33, 150, 243, 0.1) 0%, transparent 15%),
        radial-gradient(circle at 50% 50%, rgba(3, 169, 244, 0.1) 0%, transparent 20%);
      background-size: 500px 500px;
      opacity: 0.5;
    }
    
    .banner-content {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      z-index: 1;
      
      .banner-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: 1px;
      }
      
      .banner-subtitle {
        font-size: 1.2rem;
        opacity: 0.9;
      }
    }
  }
  
  .content-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .search-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: none;
  }
  
  .filter-row {
    display: flex;
    flex-wrap: wrap;
    
    .q-select {
      flex: 1;
      min-width: 150px;
    }
  }
  
  .college-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(33, 150, 243, 0.2);
    }
  }
  
  .stat-card {
    border-radius: 12px;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: none;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(33, 150, 243, 0.2);
    }
  }
  
  @media (max-width: $breakpoint-xs-max) {
    .filter-row {
      flex-direction: column;
      
      .q-select {
        margin-right: 0 !important;
        margin-bottom: 10px;
      }
    }
    
    .banner-section {
      padding: 60px 15px;
      
      .banner-title {
        font-size: 2rem;
      }
    }
  }
}
</style>